<template>
  <div class="right-card">
    <m-card title="重大地震事件">
      <el-table
        :data="tableData"
        style="width: 100%; height: 100%"
        :header-cell-style="{ background: 'transparent' }"
      >
        <el-table-column label="参考位置" width="auto">
          <template #default="scope">
            <!-- <a :href="'./#/earthquake?eq_id=' + scope.row.id" target="_blank"> -->
            {{ scope.row.location }}
            <!-- </a> -->
          </template>
        </el-table-column>
        <el-table-column prop="magnitude" label="震级" width="auto">
          <template #default="scope">
            <el-tag type="danger" effect="dark">{{
              scope.row.magnitude
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="origin_time" label="时间" width="auto" />
        <el-table-column prop="depth" label="震源深度" width="auto" />
      </el-table>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
const tableData = reactive([
  {
    id: 17207,
    location: "台湾台东县海域",
    magnitude: 5.8,
    origin_time: "2025-06-11 19:00:27",
    depth: 20.0,
  },
  {
    id: 17189,
    location: "云南大理州洱源县",
    magnitude: 5.0,
    origin_time: "2025-06-05 04:31:51",
    depth: 10.0,
  },
  {
    id: 17127,
    location: "西藏日喀则市拉孜县",
    magnitude: 5.5,
    origin_time: "2025-05-12 05:11:21",
    depth: 10.0,
  },
  {
    id: 17113,
    location: "台湾花莲县海域",
    magnitude: 5.7,
    origin_time: "2025-05-05 18:53:27",
    depth: 15.0,
  },
  {
    id: 16852,
    location: "台湾台东县海域",
    magnitude: 5.0,
    origin_time: "2025-03-13 13:09:37",
    depth: 15.0,
  },
  {
    id: 16621,
    location: "新疆阿克苏地区库车市",
    magnitude: 5.0,
    origin_time: "2025-02-05 07:42:33",
    depth: 10.0,
  },
  {
    id: 16611,
    location: "台湾嘉义县",
    magnitude: 5.2,
    origin_time: "2025-01-30 10:11:55",
    depth: 10.0,
  },
  {
    id: 16599,
    location: "台湾台南市",
    magnitude: 5.1,
    origin_time: "2025-01-26 07:38:54",
    depth: 10.0,
  },
  {
    id: 16596,
    location: "台湾台南市",
    magnitude: 5.1,
    origin_time: "2025-01-25 19:49:17",
    depth: 11.0,
  },
  {
    id: 16569,
    location: "台湾台南市",
    magnitude: 6.2,
    origin_time: "2025-01-21 00:17:27",
    depth: 14.0,
  },
  {
    id: 16530,
    location: "西藏日喀则市定日县",
    magnitude: 5.0,
    origin_time: "2025-01-13 20:58:20",
    depth: 10.0,
  },
  {
    id: 16496,
    location: "青海果洛州玛多县",
    magnitude: 5.5,
    origin_time: "2025-01-08 15:44:20",
    depth: 14.0,
  },
  {
    id: 16445,
    location: "西藏日喀则市定日县",
    magnitude: 6.8,
    origin_time: "2025-01-07 09:05:16",
    depth: 10.0,
  },
  {
    id: 16227,
    location: "新疆阿克苏地区库车市",
    magnitude: 5.5,
    origin_time: "2024-10-26 16:35:57",
    depth: 10.0,
  },
  {
    id: 16197,
    location: "新疆克孜勒苏州阿合奇县",
    magnitude: 5.3,
    origin_time: "2024-10-17 06:23:01",
    depth: 10.0,
  },
  {
    id: 16047,
    location: "台湾花莲县海域",
    magnitude: 5.0,
    origin_time: "2024-09-02 16:26:24",
    depth: 20.0,
  },
  {
    id: 16015,
    location: "新疆阿克苏地区库车市",
    magnitude: 5.0,
    origin_time: "2024-08-22 07:38:00",
    depth: 15.0,
  },
  {
    id: 16005,
    location: "台湾花莲县海域",
    magnitude: 6.1,
    origin_time: "2024-08-16 07:35:52",
    depth: 16.0,
  },
  {
    id: 16002,
    location: "台湾宜兰县",
    magnitude: 5.4,
    origin_time: "2024-08-15 17:06:46",
    depth: 20.0,
  },
]);
</script>

<style lang="scss" scoped>
.population-proportion {
  display: flex;
  height: 100%;
  &-chart {
    position: relative;
    width: 240px;
    height: 100%;
    margin-left: 15px;
    background: url("~@/assets/images/pie/pie-zs-bg.png") no-repeat;
    background-size: cover;
    .label-name {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 5vw;
      height: 72px;
      margin-left: -36px;
      margin-top: -36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #c4e3fd;
    }
    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      margin-left: -36px;
      margin-top: -36px;
      content: "";
      width: 72px;
      height: 72px;
      background: url("~@/assets/images/pie/pie-mid-circle.png") no-repeat;
      background-size: cover;
      animation: rotate360Animate 2s linear infinite;
    }
  }
  .pie-legend {
    padding-left: 0px;
  }
}
</style>
<style scoped>
:deep(.el-table) {
  background-color: transparent !important;
}
:deep(.el-table tr) {
  color: white;
  background-color: transparent !important;
}
:deep(.el-table .cell) {
  color: white;
}
</style>
